import React from "react"
import Taro from "@tarojs/taro"
import { RichText, View, Image } from "@tarojs/components"
import { navigation } from "@/utils/router"
import { pageMapper } from "@/constants/pageMap"
import palyIcon from "@/images/icons/play.png"
import styles from "./index.module.scss"

type IProps = {
  htmlBlocks: IHtmlContentBlock[]
}
type IState = {
  [key: string]: unknown
}
type IBlock = IProps["htmlBlocks"][number]
/**
 * html 富文本渲染组件
 * @component GpHtmlRenderer
 * @relate [【艺考小程序】组件渲染开发](https://www.tapd.cn/42905076/prong/stories/view/1142905076001004153)
 */
class GpHtmlRenderer extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = {}
  }
  jumpExternal = (link: string) => {
    navigation(pageMapper.external, { url: link })
  }
  renderSchoolBlock = (block: IBlock) => {
    return (
      <View
        className="gp-ce-school-link"
        onClick={() => navigation(pageMapper.institutionDetail, { id: block.data.schoolId })}
      >
        <Image className="gp-ce-school-link__img" src={block.data.meta.image.url} />
        <View className="gp-ce-school-link__content">
          <View className="gp-ce-school-link__title">{block.data.meta.title}</View>
          <View className="gp-ce-school-link__desc">{block.data.meta.description}</View>
          <View className="gp-ce-school-link__tag">
            {block.data.meta.tags.map((tag, index) => (
              <View key={index} className="gp-ce-school-link__tag-item">
                {tag}
              </View>
            ))}
          </View>
          <View className="gp-ce-school-link__remark">{block.data.meta.remark}</View>
        </View>
        {/* <View
          className="gp-ce-school-link__button"
          style={{ display: "flex !important" }}
          onClick={() => navigation(pageMapper.institutionDetail, { id: block.data.schoolId })}
        >
          查看详情
        </View> */}
      </View>
    )
  }
  renderEntryLikeBlock = (renderInfo: {
    image: string
    title: string
    desc: string
    link: string
  }) => {
    return (
      <View className="gp-ce-entry-link" onClick={() => this.jumpExternal(renderInfo.link)}>
        {renderInfo.image && <Image className="gp-ce-entry-link__img" src={renderInfo.image} />}
        <View className="gp-ce-entry-link__content">
          {/* gp-ce-entry-link__title  */}
          <View className="gp-ce-link__title">{renderInfo.title}</View>
          <View className="gp-ce-link__desc mt-auto">{renderInfo.desc}</View>
        </View>
      </View>
    )
  }
  renderVidioBlock = (block: IBlock) => {
    return (
      <View className={styles.videoBlock} onClick={() => this.jumpExternal(block.data.link)}>
        <Image src={block.data.meta.image.url} mode="scaleToFill" className={styles.videoPoster} />
        <View className={styles.playIcon}>
          <Image src={palyIcon} mode="aspectFit" className={styles.playIconImg} />
        </View>
      </View>
    )
  }
  renderRawHtml = (block: IBlock) => {
    if (process.env.TARO_ENV === "weapp") {
      if (block.html.match(/<img/i)) {
        return <View className="taro_html" dangerouslySetInnerHTML={{ __html: block.html }}></View>
      }
    }
    return <RichText nodes={block.html} userSelect selectable preview />
  }
  matchContent = (block: IBlock) => {
    if (block.type === "gpSchool") {
      return this.renderSchoolBlock(block)
    } else if (block.type === "gpEntry") {
      if (block.data.meta.entryType === 8) {
        return this.renderVidioBlock(block)
      }
      return this.renderEntryLikeBlock({
        image: block.data.meta.image.url,
        title: block.data.meta.title,
        desc: block.data.meta.description,
        link: block.data.link
      })
    } else if (block.type === "linkTool") {
      return this.renderEntryLikeBlock({
        image: block.data.meta.image.url,
        title: block.data.meta.title,
        desc: block.data.meta.description,
        link: block.data.link
      })
    }
    return this.renderRawHtml(block)
  }
  render(): React.ReactNode {
    return (
      <View className="gp-editorjs-content">
        {this.props.htmlBlocks.map(l => (
          <View key={l.id}>{this.matchContent(l)}</View>
        ))}
      </View>
    )
  }
}
export default GpHtmlRenderer
